<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"   label-width="90px">
                    <el-form-item label="区域:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="小区名称:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="房间:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="余额区间:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnQuery">重置</el-button>
                        <label @click="btnDevelop" class="btn-open">展开 
                          <i :class="{'el-icon-arrow-down':!openStatus,'el-icon-arrow-up':openStatus}"  /></label>
                    </el-form-item>
                </el-form>
                <el-form label-width="90px" v-if="openStatus">
                   <el-form-item label="客户类型:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="表具表号:" style="width:300px">
                          <el-date-picker
                            v-model="form.projectId"
                            type="date"
                            size="mini" 
                            clearable
                            placeholder="选择日期">
                          </el-date-picker>
                    </el-form-item>
                    <el-form-item label="联系电话:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                           <el-form-item label="客户名称:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                           <el-form-item label="费用状态:" style="width:300px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.projectId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item></el-form-item>
                </el-form>
          </div>
            <div class="tools-view">
              <label class="title">
                居民客户列表
                     <el-select size="mini" 
                     style="width:100px"
                            v-model="tableType" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in [{label:'按地址',value:'0'},{label:'按户号',value:'1'}]"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
              </label>
              <el-button type="primary" size="mini"   icon="el-icon-plus" @click="btnOpen">新增</el-button>
              <i class="el-icon-refresh-right" title="刷新" />
              <i class="el-icon-upload" title="下载" />
               <el-popover placement="right" width="0" trigger="click">
                <el-checkbox-group v-model="colOptions">
                    <el-checkbox v-for="(item,index) in columnList" :label="item.label" :key="index" ></el-checkbox>
                </el-checkbox-group>
                <i slot="reference" class="el-icon-s-grid" title="设置列" />
            </el-popover>
            </div>
            <el-table
                :data="tableData"
                ref="tableDataRef"
                border
                height="100%"
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 100%;">
                <el-table-column
                    prop="date"
                     align="center"
                    fixed
                    width="60"
                    label="序号">
                     <template slot-scope="scope">
                         {{scope.$index+1}}
                     </template>
                </el-table-column>
                <template  v-for="(item,index) in columnList" >
                      <el-table-column    
                          :key="index"   
                          :prop="item.prop"  
                          align="center"
                          :label="item.label"
                          min-width="120"
                          v-if="item.iStrue"
                        />
                </template>
                   <el-table-column v-if="tableType==0"
                   align="center"
                    width="80"
                    prop="name"
                    fixed="right"
                    label="操作"
                    >
                    <template slot-scope="scope">
                        <el-button  @click="btnDeales(scope.row)"   type="text" size="mini">查看</el-button>
                    </template>
                </el-table-column>
                   
            </el-table>
               <el-pagination style="margin:20px auto;width:98%"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.currentPage"
                :total="total">
                </el-pagination>
   
            <el-dialog  :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1100px"  :title="title">
               <residentDetail />
            </el-dialog>

  </div>
</template>

<script>
// import  {getReceipts,saveReceipts,delReceipts,allListProject,enterpriseList,getUserList}  from '@/api/user'
import residentDetail from './components/residentDetail'

export default {
  components:{
    residentDetail
  },
  data() {
    return {
        tableData: [
            {
            name:'张三的地',
            mu:'19',
            date:'2021-10-01'
        },
        {
            name:'张三的地',
            mu:'19',
            date:'2021-10-01'
        },
        {
            name:'张三的地',
            mu:'19',
            date:'2021-10-01'
        }
        ],
        tableType:'0',
        dialogVisible:false,
        openStatus:false,
        form: {
          rcStatus: '',
          projectName:'',
          projectId:"",
          pageNum:1,
          pageSize:10,
        },
        saveForm:{
          id:'',
          projectId:'', 
          enterpriseId:'',
          rcAmount:'', 
          rcTime:'',
          rcPeople:'', 
          rcNumber:'',  
          rcStatus:''
        },
        rules: {
          projectId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          enterpriseId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          rcAmount: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
        },
        title:'',
        total:0,
        projectList:[],
        entList:[],
        userList:[],
        colData:[],  
        columnList:[],
        dataList:[
          {label:'客户名称',prop:'name',iStrue:false,tableType:'0'},
          {label:'电话',prop:'name',iStrue:true,tableType:'0'},
          {label:'客户类型',prop:'name',iStrue:true,tableType:'0'},
          {label:'区域',prop:'name',iStrue:true,tableType:'0'},
          {label:'小区名称',prop:'name',iStrue:true,tableType:'0'},
          {label:'楼栋',prop:'name',iStrue:true,tableType:'0'},
          {label:'单元',prop:'name',iStrue:true,tableType:'0'},
          {label:'门牌号',prop:'name',iStrue:true,tableType:'0'},
          {label:'所属项目',prop:'name',iStrue:true,tableType:'0'},

          {label:'户号',prop:'name',iStrue:false,tableType:'1'},
          {label:'客户名称',prop:'name',iStrue:true,tableType:'1'},
          {label:'电话',prop:'name',iStrue:true,tableType:'1'},
          {label:'客户类型',prop:'name',iStrue:true,tableType:'1'},
          {label:'区域',prop:'name',iStrue:true,tableType:'1'},
          {label:'小区详细名称',prop:'name',iStrue:true,tableType:'1'},
          {label:'楼栋',prop:'name',iStrue:true,tableType:'1'},
          {label:'单元',prop:'name',iStrue:true,tableType:'1'},
          {label:'门牌号',prop:'name',iStrue:true,tableType:'1'},
          {label:'详细地址',prop:'name',iStrue:true,tableType:'1'},
          {label:'所属项目',prop:'name',iStrue:true,tableType:'1'},
          {label:'表号',prop:'name',iStrue:true,tableType:'1'}     
        ],  
        colOptions: [],
    }
  },
    watch: {
     colOptions(valArr) {
       this.columnList.map((item)=>{
        if(valArr.includes(item.label)){
          item.iStrue=true
        }else{
          item.iStrue =false
        }
        return item
       })
     },
     tableType(){
       this.setTable(this.tableType)
     }
   },
  created(){
   this.setTable('0')
  },
  methods: {
    setTable(type){
     this.columnList= this.dataList.filter((list)=>{
        return list.tableType==type
      })
      this.columnList.map((item)=>{
          this.colOptions.push(item.label)
      })
    },
    btnQuery(){
      this.getPageList()
    },
    btnDevelop(){
      this.openStatus =!this.openStatus
    },
     getPageList(){
           getReceipts(this.form).then((res)=>{
               if(res.code==200){
                 this.tableData = res.rows.sort(this.compare('rcTime','inverted'));
                this.total = res.total
              }else{
                 this.tableData = []
              }
          })
     },
     btnSave(){
           this.$refs['formName'].validate((valid) => {
                if (valid) {
                    saveReceipts(this.saveForm).then((res)=>{
                      if(res.code=200){
                        this.$message({
                          message: '保存成功',
                          type: 'success'
                        });
                        this.dialogVisible = false
                         this.getPageList()
                      }else{
                        this.$message({
                          message: '保存失败',
                          type: 'error'
                        });
                      }
                    })
                } else {
                    return false;
                }
            });
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.form.currentPage = val
        this.getPageList()
      },
      btnOpen(){
        this.saveForm={
          id:'',
          projectId:'', 
          enterpriseId:'',
          rcAmount:'',
          rcTime:'',
          rcPeople:'',
          rcNumber:'',
          rcStatus:''
        }
        this.title='新增信息'
        this.dialogVisible = true
      },
      btnDeales(item){
         this.title='详情'
       this.saveForm={
          id:item.id,
          projectId:item.projectId, 
          enterpriseId:item.enterpriseId, 
          rcAmount:item.rcAmount,  
          rcTime:item.rcTime, 
          rcPeople:item.rcPeople,  
          rcNumber:item.rcNumber,  
          rcStatus:item.rcStatus
        }
        this.dialogVisible = true
      },
      btnDel(item){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delReceipts(item.id).then((res)=>{
               if(res.code==200){
                 this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                   this.getPageList()
              }else{
                  this.$message({
                          message: '删除失败',
                          type: 'error'
                        });
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>